{% extends 'base/nav.html' %}
{% load static %}

{% block title %}旅游景点 - 旅游舆情监测{% endblock %}

{% block css %}
<style>
    /* 英雄区域样式 */
    .hero-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 80px 0;
        margin-bottom: 50px;
        border-radius: 0 0 30px 30px;
        position: relative;
        overflow: hidden;
    }

    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.05)" points="0,1000 1000,0 1000,1000"/></svg>');
    }

    .hero-title {
        font-size: 3.5rem;
        font-weight: 800;
        margin-bottom: 20px;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    }

    .hero-subtitle {
        font-size: 1.3rem;
        margin-bottom: 30px;
        opacity: 0.9;
        font-weight: 300;
    }

    /* 景点卡片样式 - 增强版 */
    .attraction-card {
        border: none;
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        overflow: hidden;
        margin-bottom: 30px;
        background: white;
        position: relative;
    }

    .attraction-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        transform: scaleX(0);
        transition: transform 0.4s ease;
    }

    .attraction-card:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    }

    .attraction-card:hover::before {
        transform: scaleX(1);
    }

    .card-image {
        height: 220px;
        background-size: cover;
        background-position: center;
        position: relative;
        transition: transform 0.4s ease;
    }

    .attraction-card:hover .card-image {
        transform: scale(1.05);
    }

    .card-image::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60%;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
    }

    .heat-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        background: linear-gradient(135deg, #ff6b6b, #ee5a24);
        color: white;
        padding: 8px 15px;
        border-radius: 25px;
        font-weight: 700;
        box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
        z-index: 2;
        backdrop-filter: blur(10px);
    }

    .category-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(255, 255, 255, 0.95);
        color: #2c3e50;
        padding: 6px 12px;
        border-radius: 15px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        z-index: 2;
    }

    .card-body {
        padding: 25px;
        position: relative;
    }

    .attraction-title {
        font-size: 1.4rem;
        font-weight: 800;
        color: #2c3e50;
        margin-bottom: 12px;
        line-height: 1.3;
    }

    .attraction-title a {
        color: inherit;
        text-decoration: none;
        transition: color 0.3s ease;
        background: linear-gradient(135deg, #2c3e50, #3498db);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .attraction-title a:hover {
        background: linear-gradient(135deg, #3498db, #2980b9);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .location {
        color: #7f8c8d;
        margin-bottom: 15px;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
    }

    .location i {
        color: #e74c3c;
        margin-right: 8px;
        font-size: 1.1rem;
    }

    .description {
        color: #5d6d7e;
        font-size: 0.92rem;
        line-height: 1.6;
        margin-bottom: 20px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-top: 20px;
        border-top: 1px solid #f1f2f6;
    }

    .stat-item {
        text-align: center;
        flex: 1;
        position: relative;
    }

    .stat-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 30px;
        background: #f1f2f6;
    }

    .stat-number {
        font-size: 1.2rem;
        font-weight: 800;
        color: #2c3e50;
        display: block;
    }

    .stat-label {
        font-size: 0.75rem;
        color: #7f8c8d;
        margin-top: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
    }

    .action-buttons {
        display: flex;
        gap: 12px;
    }

    .btn-view {
        flex: 1;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border: none;
        color: white;
        padding: 12px 25px;
        border-radius: 15px;
        font-weight: 700;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .btn-view::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }

    .btn-view:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
        color: white;
    }

    .btn-view:hover::before {
        left: 100%;
    }

    /* 分类筛选器 - 增强版 */
    .category-section {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        border-radius: 25px;
        padding: 40px;
        margin-bottom: 50px;
        color: white;
        position: relative;
        overflow: hidden;
    }

    .category-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><circle fill="rgba(255,255,255,0.1)" cx="200" cy="200" r="100"/><circle fill="rgba(255,255,255,0.05)" cx="800" cy="800" r="150"/></svg>');
    }

    .section-title {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 25px;
        text-align: center;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    }

    .category-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }

    .category-tag {
        padding: 12px 24px;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50px;
        text-decoration: none;
        color: white;
        font-size: 0.95rem;
        font-weight: 600;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .category-tag::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }

    .category-tag:hover,
    .category-tag.active {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.5);
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        color: white;
        text-decoration: none;
    }

    .category-tag:hover::before {
        left: 100%;
    }

    /* 统计信息栏 */
    .stats-bar {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        border-radius: 20px;
        padding: 30px;
        margin-bottom: 40px;
        color: white;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        text-align: center;
    }

    .stat-card {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10px);
        padding: 25px;
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .stat-card-number {
        font-size: 2.5rem;
        font-weight: 800;
        margin-bottom: 5px;
        text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    }

    .stat-card-label {
        font-size: 0.9rem;
        opacity: 0.9;
        font-weight: 600;
    }

    /* 空状态样式 */
    .empty-state {
        text-align: center;
        padding: 80px 20px;
        background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
        border-radius: 25px;
        margin: 40px 0;
    }

    .empty-state i {
        font-size: 5rem;
        background: linear-gradient(135deg, #667eea, #764ba2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 25px;
    }

    .empty-state h4 {
        color: #2c3e50;
        margin-bottom: 15px;
        font-weight: 700;
    }

    .empty-state p {
        color: #7f8c8d;
        margin-bottom: 30px;
        font-size: 1.1rem;
    }

    /* 分页样式 */
    .pagination-container {
        margin-top: 60px;
    }

    .page-link {
        border: none;
        margin: 0 5px;
        border-radius: 12px !important;
        color: #5d6d7e;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .page-item.active .page-link {
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-color: transparent;
    }

    .page-link:hover {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        transform: translateY(-2px);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .hero-title {
            font-size: 2.5rem;
        }

        .hero-subtitle {
            font-size: 1.1rem;
        }

        .category-section {
            padding: 25px;
        }

        .section-title {
            font-size: 1.5rem;
        }

        .stats {
            flex-direction: column;
            gap: 15px;
        }

        .stat-item:not(:last-child)::after {
            display: none;
        }

        .category-tags {
            justify-content: flex-start;
        }
    }
</style>

{% endblock %}

{% block content %}
<!-- 英雄区域 -->
<section class="hero-section">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <h1 class="hero-title">
                    <i class="fa fa-map-marked-alt"></i> 探索世界之美
                </h1>
                <p class="hero-subtitle">发现最热门的旅游目的地，聆听千万游客的真实声音</p>
            </div>
        </div>
    </div>
</section>

<div class="container">
    <!-- 统计信息栏 -->
    <div class="stats-bar">
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-card-number">{{ total_attractions }}</div>
                <div class="stat-card-label">精选景点</div>
            </div>
            <div class="stat-card">
                <div class="stat-card-number">{{ total_reviews|default:"10万+" }}</div>
                <div class="stat-card-label">真实评论</div>
            </div>
            <div class="stat-card">
                <div class="stat-card-number">{{ total_categories|default:"50+" }}</div>
                <div class="stat-card-label">景点分类</div>
            </div>
            <div class="stat-card">
                <div class="stat-card-number">{{ active_users|default:"1万+" }}</div>
                <div class="stat-card-label">活跃用户</div>
            </div>
        </div>
    </div>

    <!-- 分类筛选区域 -->
    <div class="category-section">
        <h2 class="section-title">
            <i class="fa fa-compass"></i> 探索分类
        </h2>
        <div class="category-tags">
            {% for category in hot_categories %}
            <a href="{% url 'main:attraction_by_category' category.pk %}"
               class="category-tag {% if current_category == category.pk %}active{% endif %}">
                <i class="fa fa-{{ category.icon|default:'bookmark' }} me-2"></i>
                {{ category.name }}
            </a>
            {% endfor %}
        </div>
    </div>

    <!-- 景点列表 -->
    <div class="row">
        {% if attractions %}
            {% for attraction in attractions %}
            <div class="col-lg-4 col-md-6">
                <div class="card attraction-card">
                    <!-- 景点图片 -->
                    <div class="card-image" style="background-image: url('{% if attraction.main_image %}{{ attraction.main_image.url }}{% else %}{% static 'images/default-attraction.jpg' %}{% endif %}')">
                        <!-- 热度标签 -->
                        <div class="heat-badge">
                            <i class="fa fa-fire"></i> {{ attraction.heat_index }}
                        </div>
                        <!-- 分类标签 -->
                        {% if attraction.categories.first %}
                        <div class="category-badge">
                            {{ attraction.categories.first.name }}
                        </div>
                        {% endif %}
                    </div>

                    <div class="card-body">
                        <!-- 景点标题 -->
                        <h3 class="attraction-title">
                            <a href="{% url 'main:attraction_detail' attraction.pk %}">
                                {{ attraction.name }}
                            </a>
                        </h3>

                        <!-- 位置信息 -->
                        <div class="location">
                            <i class="fa fa-map-marker-alt"></i>
                            {{ attraction.location }}
                        </div>

                        <!-- 景点描述 -->
                        <p class="description">
                            {{ attraction.description|truncatewords:25 }}
                        </p>

                        <!-- 统计数据 -->
                        <div class="stats">
                            <div class="stat-item">
                                <span class="stat-number text-primary">
                                    <i class="fa fa-comment"></i> {{ attraction.review_count }}
                                </span>
                                <span class="stat-label">评论</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number text-success">
                                    <i class="fa fa-star"></i> {{ attraction.avg_sentiment_score|default:"4.5"|floatformat:1 }}
                                </span>
                                <span class="stat-label">评分</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number text-info">
                                    <i class="fa fa-eye"></i> {{ attraction.view_count|default:"1000" }}
                                </span>
                                <span class="stat-label">浏览</span>
                            </div>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="action-buttons">
                            <a href="{% url 'main:attraction_detail' attraction.pk %}"
                               class="btn btn-view">
                                <i class="fa fa-eye me-2"></i> 探索详情
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <!-- 空状态 -->
            <div class="col-12">
                <div class="empty-state">
                    <i class="fa fa-map-signs"></i>
                    <h4>暂无景点数据</h4>
                    <p>我们正在努力添加更多精彩的旅游目的地</p>
                    {% if user.is_authenticated %}
                    <a href="{% url 'users:attraction_create' %}" class="btn btn-primary btn-lg" style="background: linear-gradient(135deg, #667eea, #764ba2); border: none;">
                        <i class="fa fa-plus me-2"></i> 贡献景点
                    </a>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>

    <!-- 分页 -->
    {% if is_paginated %}
    <div class="pagination-container">
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">
                        <i class="fa fa-chevron-left"></i>
                    </a>
                </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                    <li class="page-item active">
                        <span class="page-link">{{ num }}</span>
                    </li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ num }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">{{ num }}</a>
                    </li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">
                        <i class="fa fa-chevron-right"></i>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block js %}
<script>
    // 增强交互效果
    document.addEventListener('DOMContentLoaded', function() {
        // 卡片悬停效果
        const cards = document.querySelectorAll('.attraction-card');
        cards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-12px) scale(1.02)';
            });

            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0) scale(1)';
            });
        });

        // 分类标签点击效果
        const categoryTags = document.querySelectorAll('.category-tag');
        categoryTags.forEach(tag => {
            tag.addEventListener('click', function(e) {
                if (!this.classList.contains('active')) {
                    categoryTags.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                }
            });
        });

        // 滚动动画
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);


        cards.forEach(card => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(30px)';
            card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(card);
        });
    });
</script>
{% endblock %}